<template>
  <div class="main-content">
    <div class="cl-module">
      <div class="cl-m-header">
        订单信息
      </div>
      <div class="cl-m-body">
        <div class="order-field">
          <span>订单课程</span>
          <p>{{course.title}}</p>
        </div>
        <div class="order-field">
          <span>订单号</span>
          <p>{{order.order_sn}}</p>
        </div>
        <div class="order-field">
          <span>订单金额</span>
          <p>{{order.order_amount}}</p>
        </div>
      </div>
    </div>
    <button class="page-submit-btn" @click="pay" v-if="configLoad">微信支付</button>
  </div>
</template>

<script>
import CourseItem from 'components/CourseItem'

import { XInput } from 'vux'

export default {
  components: {
    CourseItem,
    XInput
  },
  data () {
    return {
      course: {
        count_data: {},
        material: {
          labels: []
        }
      },
      order: {},
      payConfig: {},
      phone: '',
      configLoad: false
    }
  },
  created () {
    var id = parseInt(this.$route.params.id)
    if (isNaN(id) || id < 0) {
      id = 0
    }
    this.id = id

    this.$api.order.orderDetail(id)
        .then((order) => {
          this.course = order.course
          this.order = order
        })
    this.$api.wechat.getPayConfig(id)
        .then((payConfig) => {
          this.configLoad = true
          this.payConfig = JSON.parse(payConfig)
        })
  },
  methods: {
    pay () {
      // var config = {"code":0,"msg":"Success","data":"{\"appId\":\"wxfd70a1592861c509\",\"timeStamp\":\"1488363866\",\"nonceStr\":\"58b6a15a271be\",\"package\":\"prepay_id=\",\"signType\":\"MD5\",\"paySign\":\"E808F9D9F58B60245D6C436B5951E642\"}"}
      this.$wechat.invoke(
        'getBrandWCPayRequest', this.payConfig, (res) => {
          switch (res.err_msg) {
            case 'get_brand_wcpay_request:cancel':
              // this.showError('用户取消支付！')
              break
            case 'get_brand_wcpay_request:fail':
              this.showError('支付失败！（' + res.err_desc + '）')
              this.$xLog(res.err_desc)
              break
            case 'get_brand_wcpay_request:ok':
              this.paySuccess()
              break
            default:
              this.showError('支付失败')
              // alert(JSON.stringify(res));
              break
          }
        }
      )
    },
    paySuccess () {
      this.$api.order.paySuccess(this.order.id).then(() => {
        // this.showSuccess('支付成功！')
        // setTimeout(() => {
        if (this.order.type === 1) {
          this.$router.push('/parent/course/sign_up_success')
        } else {
          this.$router.push('/parent/course/my_learn/1')
        }

        // }, 1000)
      }).catch((e) => {
        this.showError('支付失败')
      })
    }
  }
}
</script>

<style scoped>
.study-page{
  margin-bottom: 60px;
}
.explain{
  color:#323b46;
}
.textarea{
  height: auto;
}
.sign{
  margin-left: 60%;
}
.apply{
  height: 50px;
  line-height: 50px;
}
.weui_icon.weui_icon_warn::before{
  display: none;
}
.order-field{
  margin:10px auto;
}
.order-field span{
  color:#60C9CF;
}
.order-field p{
}
</style>
